<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .class_outer{
            display: block;
            width: 550px;
            height: 300px;
            margin: 10px auto;
            position: relative;
            overflow: hidden;
        }
        .class_cover{
            width: 550px;
            height: 50px;
            line-height: 50px;
            padding-left: 5px;
            background-color: black;
            opacity: 0.5;
            color:#ffffff;
            font-size: 15px;
            text-align:center;
            position: absolute;
            left:0;
            bottom: 0;
        }
    </style>
</head>
<body>
<a href="#" class="class_outer">
    <img src="gugong.jfif" alt="" width="550px" height="300px" border="0">
    <span class="class_cover">故宫</span>
</a>
</body>
</html>